<template>
  <div class="content_box">
    <VHeader :option-config="option" :list-data="interimListData" @change="search">
      <el-button icon="el-icon-delete" circle @click="deleteData('/deleteClasses.do', deleteArr)" />
      <el-button icon="el-icon-plus" circle @click="addViews = true" />
      <el-button icon="el-icon-refresh-right" circle @click="getListData" />
    </VHeader>
    <el-dialog :visible.sync="addViews" title="创建班级" width="30%" destroy-on-close>
      <el-form label-position="left" label-width="80px" :model="add_data" :rules="add_rules" @submit.native.prevent>
        <el-form-item label="班级名称" prop="class_name">
          <el-input v-model="add_data.class_name" clearable />
        </el-form-item>
        <el-form-item label="教师名称" prop="class_teacher">
          <el-input v-model="add_data.class_teacher" clearable />
        </el-form-item>
        <el-form-item label="专业名称" prop="class_teacher">
          <el-select
            v-model="add_data.major_name"
            clearable
            filterable
            placeholder="选择专业"
            no-data-text="专业表为空"
            no-match-text="搜索结果为空"
          >
            <el-option
              v-for="(item, index) in major_list"
              :key="index"
              :value="item.major_name"
              :disabled="item.status"
              :label="item.major_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="add_data.status" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="!add_data.class_name || !add_data.class_teacher || !add_data.major_name"
            @click="addData"
          >创建</el-button>
          <el-button @click="re">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="editViews" title="修改班级" width="30%" destroy-on-close>
      <el-form label-position="left" label-width="80px" :model="editData" :rules="add_rules" @submit.native.prevent>
        <el-form-item label="班级名称" prop="class_name">
          <el-input v-model="editData.class_name" clearable />
        </el-form-item>
        <el-form-item label="教师名称" prop="class_teacher">
          <el-input v-model="editData.class_teacher" clearable />
        </el-form-item>
        <el-form-item label="专业名称" prop="class_teacher">
          <el-select
            v-model="editData.major_name"
            clearable
            filterable
            placeholder="选择专业"
            no-data-text="专业表为空"
            no-match-text="搜索结果为空"
          >
            <el-option
              v-for="(item, index) in major_list"
              :key="index"
              :value="item.major_name"
              :disabled="item.status"
              :label="item.major_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="editData.status" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="!editData.class_name || !editData.class_teacher || !editData.major_name"
            @click="upData"
          >修改</el-button>
          <el-button @click="re">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <VTable :list-data="listData[pageConfig.Page - 1]" :table-config="tableConfig" :loading="loading" @select-change="selectChange">
      <template v-slot:operate="scope">
        <el-button-group>
          <el-button type="primary" icon="el-icon-edit" @click="showUpData(scope.data.row)" />
          <el-button
            type="primary"
            icon="el-icon-delete"
            @click="deleteData('/deleteClasses.do', [{ key: scope.data.row.key }])"
          />
        </el-button-group>
      </template>
    </VTable>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :size-change="pageConfig.size"
      :current-page.sync="pageConfig.Page"
      :total="pageConfig.total"
      class="Pagination"
      @size-change="pageSizeChange"
      @current-change="setPage"
    />
  </div>
</template>

<script>
import { getClassesApi, addClassesApi, majorsListApi, updateClassApi } from '@/api/table'
import { tableDataProcess, deleteData, pageSizeChange } from '@/utils/diy_funtion'
export default {
  name: 'Class',
  data() {
    return {
      listData: [],
      interimListData: [],
      loading: true,
      tableConfig: {
        table_show: {
          key: 'ID',
          add_time: '创建时间',
          major_name: '专业名',
          class_name: '班级名称',
          class_teacher: '教师',
          students: '学生数'
        },
        sortable: { key: true },
        status: true,
        selection: true,
        align: 'center',
        operate: true
      },
      option: {
        option_name: ['ID', '专业'],
        object_name: ['key', 'major_name']
      },
      editData: {},
      editViews: false,
      addViews: false,
      major_list: [],
      add_data: { class_teacher: '', class_name: '', major_name: '', status: false },
      add_rules: {
        class_teacher: [
          { required: true, message: '请输入教师名称', trigger: 'blur' }
        ],
        class_name: [
          { required: true, message: '请输入班级名称', trigger: 'blur' }
        ],
        major_name: [
          { required: true, message: '请输入专业名称', trigger: 'blur' }
        ]
      },
      deleteArr: [],
      pageConfig: {
        total: 1,
        Page: 1,
        size: [10, 20, 50, 100],
        pagesSize: 10
      }
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    // 换页
    pageSizeChange: pageSizeChange,
    // 删除表数据
    deleteData: deleteData,
    getListData() {
      this.loading = true
      const newData = []
      getClassesApi().then(response => {
        const { newListData, data } = tableDataProcess(response.data.data, this.pageConfig.pagesSize)
        this.pageConfig.total = data.length
        this.listData = newListData
        this.interimListData = data
      })
      // 获取专业列表
      majorsListApi().then((res) => {
        for (const i in res.data.data) {
          res.data.data[i].status = !res.data.data[i].status
          newData.push({ major_name: res.data.data[i].major_name, status: res.data.data[i].status })
        }
      })
      setTimeout(() => (this.loading = false), 500)
      this.major_list = newData
    },
    // 表多选时
    selectChange(v) {
      this.deleteArr = v
    },
    // 显示修改弹窗
    showUpData(data) {
      this.editData = {}
      // 对象深拷贝
      this.editData = JSON.parse(JSON.stringify(data))
      this.editViews = true
    },
    addData() {
      if (this.add_data.status) {
        this.add_data.status = 1
      } else {
        this.add_data.status = 0
      }
      addClassesApi(this.add_data).then(response => {
        this.getListData()
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
        this.addViews = false
        this.getListData()
      })
    },
    upData() {
      if (this.editData.status) {
        this.editData.status = 1
      } else {
        this.editData.status = 0
      }
      updateClassApi(this.editData).then((response) => {
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
        this.editViews = false
        this.getListData()
      })
    },
    re() {
      this.add_data = {}
      Object.keys(this.editData).forEach(item => {
        if (item !== 'key') this.editData[item] = null
      })
    },
    setPage(v) {
      this.pageConfig.Page = v
    },
    // 搜索
    search(value) {
      this.listData = value.data
      this.pageConfig.total = value.total
    }
  }
}
</script>

<style scoped>
</style>
